<template>
    <div>
        <div class="searchArea">
            <el-input v-model="account" placeholder="操作人" class="searchTextInput" clearable/>
            <el-select v-model="module" class="searchTextInput" placeholder="选择模块" clearable>
                <el-option
                    v-for="item in modules"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
            <el-button type="primary" class="searchButton" @click="searchLog">查询</el-button>
        </div>

        <div class="table">
            <el-table 
            :data="tableData" 
            style="width: 100%" 
            max-height="500"
            stripe 
            border 
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{textAlign:'center'}"
            >
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column prop="module" label="模块" width="88" :formatter="formatModuleName"/>
                <el-table-column prop="action" label="行为" min-width="88" />
                <el-table-column prop="account" label="操作人" width="88" />
                <el-table-column prop="optime" label="操作时间" width="155" :formatter="formatTime1" />
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100, 150, 200, 250, 300]"
                :small="false"
                :disabled="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                total-text="总共"
                style="justify-content:end"
            />
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import {useRouter, useRoute} from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus'
import TenantApi from '../../apis/tenant'
import { table } from 'console';
import {formatTime} from '../../utils/TimeUtils'

const router = useRouter();
const route = useRoute();

var tableData:any = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(200)

const account = ref("");
const module = ref("");
const startTime = ref();
const endTime = ref();
const modules = ref([
    {
        value: 'Login',
        label: '登陆模块',
    },{
        value: 'Env',
        label: '环境模块',
    },{
        value: 'EnvGroup',
        label: '环境分组',
    },{
        value: 'EnvTag',
        label: '环境标签',
    },{
        value: 'RPATask',
        label: '任务流程',
    },{
        value: 'RPATaskDetail',
        label: '任务详情',
    },{
        value: 'RPAGroup',
        label: '任务分组',
    },{
        value: 'RPATag',
        label: '任务标签',
    }
])

onMounted(()=>{
    loadData();
})

const searchLog = () =>{
    loadData();
}

const loadData = () => {
    TenantApi.fetchLog(module.value, account.value, currentPage.value-1, pageSize.value).then(ret=>{
        if(ret.code == 0){
            tableData.value = ret.data.list;
            total.value = ret.data.totalCount;
            currentPage.value = ret.data.page+1;
            pageSize.value = ret.data.pageSize;
        }else{
            ElMessage({
            type: 'error',
            message: ret.message,
        })
        }
    }).catch(err=>{
        ElMessage({
            type: 'error',
            message: err,
        })
    })
}


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  loadData();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  loadData();
}

const formatModuleName = (row:any, column:any, cellValue:any, index:any) =>{
    const moduleCode = cellValue;
    const filter = modules.value.filter(item=>item.value == moduleCode);
    if(filter && filter.length>0) {
        let moduleName = filter[0].label;
        return moduleName;
    }else{
        return "未知模块"
    }
}

const formatTime1 = (row:any)=>{
    return formatTime({createTime: row.optime}, null, null, null);
}
</script>

<style scoped>
.searchArea {
    padding-bottom: 10px;
}
.searchButton {
    margin-left: 0px;
}
.searchTextInput {
    width: 120px;
    margin-right: 10px;
}
.pagination {
    margin-top: 15px;
}
</style>
